<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>phatfusion : </title>

<link rel="stylesheet" href="../_css/main.css" type="text/css" media="all">
<style type="text/css" media="screen">
	label {
		display: block;
		cursor: pointer;
	}
	dt {
		padding-top: 5px;
	}
	dd {
		margin-left: 50px;
		margin-bottom: 10px;
	}
	.downloadItem {
		cursor: pointer;
	}
	.downloadItem:hover {
		background: #607293;
		color: #fff;
	}
	.selected {
		background: #f0f0f0;
	}
</style>

<script type="text/javascript" src="../_core/mootools-1.2-core-nc.js"></script>
<script type="text/javascript">

	var cls = [];
	var data = {};

	window.addEvent('domready', function(){
		new Request.JSON({url:'../scripts.json', onComplete:function(dataObj){

			data = dataObj;
			for(var el in data){
				var item = new Element('h3', {'text': el}).inject($('menu'));
				var list = new Element('dl').inject($('menu'));
				
				for(var e in data[el]){
					if (e != 'desc') {
						var div = new Element('div', {'class':'downloadItem'}).inject(list);
						var item = new Element('dt').inject(div);
						var id = e.replace('.','_');
						data[el][e].input = new Element('input', {
							'type': 'checkbox',
							'id': id,
							'parent': el,
							'name': id,
							'value': 'true',
							'events': {
								'change': function(){
									this.getParent('.downloadItem').toggleClass('selected');
									var name = this.get('parent')+'/'+this.id;
									if(this.checked){
										cls.push(name);
										selectDeps(this.get('parent'), this.id);
									}else{
										cls.erase(name);
										deselectDeps(this.id);
									}
								}
							}
						}).inject(item);
							//item.set('html', e);
						var chk = new Element('dd', {'html': '<label for="'+id+'"><strong>'+e+'</strong><br/>'+data[el][e].desc+'</label>'}).inject(div);
					}
				}
				new Element('div', {'class': 'clear'}).inject($('menu'));
			}
			
		}}).get();
	});
	
	function deselectDeps(mod){
		mod = mod.replace('_', '.');
		for(var el in data){
			for(var e in data[el]){
				if(data[el][e].deps){
					if(data[el][e].deps.contains(mod)){
						var i = data[el][e].input;
						i.set('checked', false);
						i.getParent('.downloadItem').removeClass('selected');
						cls.erase(i.get('parent')+'/'+i.id);
					}
				}
			}
		}
	}
	
	function selectDeps(parent, mod){
		mod = mod.replace('_', '.');
		for(var el in data){
			for(var e in data[el]){
				if(data[parent][mod].deps.contains(e)){
					var i = data[el][e].input;
					i.set('checked', true);
					i.getParent('.downloadItem').addClass('selected');
					cls.include(i.get('parent')+'/'+i.id);
				}
			}
		}
	}
	
	

</script>

</head>
<body>

	<div id="container">
			<div id="header">
			<div id="logo"><a href="../../index.htm">home</a><h1>phatfusion</h1></div>
			<div class="nav">
				<span><a href="../_docs/index.htm">docs</a></span><span>.</span>
				<span><a href="../_demos/index.htm">demos</a></span><span>.</span>
				<span><a href="http://phatfusion.googlecode.com">svn</a></span><span>.</span><span><a href="http://phatfusion.blogspot.com/">blog</a></span><span>.</span>
				<span><a href="http://forum.phatfusion.net">forum</a></span>
			</div>
			<div class="desc">
				<p class="strap">javascript &amp; mootools plugins.</p>
			</div>
			</div>
		
		
		<div id="menu">
			
		</div>
		
		<div id="footer">
			
		</div>
		
		
	</div>

</body>
</html>